<template>
    <article class="w-75 mx-auto mb-5 pb-3" v-if="currentPost">
        <img :src="currentImageUrl" alt="currentPost.title" class="rounded-lg img-fluid my-4 article-image" v-if="currentImageUrl">
        <h2 class="mb-4">{{ currentPost.title }}</h2>
        <div class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0">
            <div class="col">
                <UserProfile :user="currentPost.author" v-if="typeof currentPost.author === 'object'"></UserProfile>
            </div>
            <span class="text-muted col text-right font-italic">发表于：{{ currentPost.createdAt }}</span>
        </div>
        <div v-html="currentHTML"></div>
        <!-- <div v-if="showEditArea" class="btn-group mt-5">
            <router-link type="button" class="btn btn-success" :to="{ name: 'create', query: { id: currentPost._id } }">
                编辑
            </router-link>
            <button type="button" class="btn btn-danger" @click.prevent="modalIsVisible = true">删除</button>
        </div> -->
    </article>
</template>
<script setup lang="ts">
import { onMounted, ref,} from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import UserProfile from '@/components/UserProfile.vue';
const store = useStore()
const route = useRoute()
const article_id = ref()
const currentPost = ref()
const currentImageUrl = ref()
const currentHTML = ref()
//当路由的名称为article时，获取它的动态参数id
if (route.name == 'article') {
    article_id.value = route.params.id
    console.log(article_id.value)
}
//在进入页面之前进行获取数据，然后进行数据的渲染
onMounted(() => {
    store.dispatch('fetchArticleDetail', article_id.value).then(()=>{
        currentPost.value = store.state.article
        if(currentPost.value){
            currentHTML.value = currentPost.value.content
            //当有图片时进行显示图片
            if(currentPost.value.image.url){
                currentImageUrl.value = currentPost.value.image.url
            }
            //当没有图片时
            else{
                currentImageUrl.value = "没有图片"
            }
        }

    }).catch((e)=>{
        console.log("获取单个文章的数据失败！")
    })
})
</script>
<style>
.article-image{
    width: 100%;
    height: 250px;
}
</style>